<template>
  <div class="feedback-container">
    <!-- 反馈列表 -->
    <div class="feedback-list">
      <el-card
        v-for="feedback in feedbacks"
        :key="feedback.id"
        class="feedback-item"
        :class="{ 'has-reply': feedback.reply }"
      >
        <div class="feedback-title">标题:{{ feedback.title }}</div>
        <div class="feedback-header">
          <div class="status-tag" :class="getStatusClass(feedback.status)">
            {{ getStatusText(feedback.status) }}
          </div>
          <div class="feedback-time">
            {{ formatDate(feedback.createTime) }}
          </div>
        </div>

        <div class="feedback-content">内容: {{ feedback.content }}</div>

        <!-- 管理员回复 -->
        <div v-if="feedback.reply" class="admin-reply">
          <div class="reply-header">
            <el-icon><Avatar /></el-icon>
            <span class="reply-title">管理员回复</span>
          </div>
          <div class="reply-content">
            {{ feedback.reply }}
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="feedback-actions">
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(feedback.id)"
          >
            删除
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Avatar } from "@element-plus/icons-vue";
import api from "@/api";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

// 数据状态
const feedbacks = ref([]);
const currentPage = ref(1);
const pageSize = 8;
const total = ref(0);

// 状态映射配置
const statusConfig = {
  0: { text: "待处理", class: "pending" },
  1: { text: "已受理", class: "processing" },
  2: { text: "已解决", class: "resolved" },
};

// 获取反馈列表
const fetchFeedbacks = async () => {
  try {
    const res = await api.feedback.getFeedbackList({
      userId: userStore.userInfo.id,
      page: currentPage.value,
      size: pageSize,
    });

    feedbacks.value = res.data.data;
    total.value = res.data.total;
  } catch (error) {
    ElMessage.error("获取反馈列表失败");
  }
};

// 删除反馈
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm("确定删除该反馈吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    await api.feedback.deleteFeedback(id, userStore.userInfo.id);
    ElMessage.success("删除成功");
    fetchFeedbacks();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
};

// 分页处理
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  fetchFeedbacks();
};

// 状态显示方法
const getStatusClass = (status) => statusConfig[status]?.class || "pending";
const getStatusText = (status) => statusConfig[status]?.text || "未知状态";

// 日期格式化
const formatDate = (timestamp) => {
  return new Date(timestamp).toLocaleDateString();
};

// 初始化加载
onMounted(fetchFeedbacks);
</script>

<style scoped lang="css">
.feedback-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

.feedback-item {
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;

  &.has-reply {
    border-left-color: #409eff;
  }
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.status-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;

  &.pending {
    background: #fef0f0;
    color: #f56c6c;
  }
  &.processing {
    background: #f0f9eb;
    color: #67c23a;
  }
  &.resolved {
    background: #ecf5ff;
    color: #409eff;
  }
}

.feedback-time {
  color: #999;
  font-size: 12px;
}

.feedback-content {
  margin: 15px 0;
  color: #333;
  line-height: 1.6;
}

.admin-reply {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .el-icon {
    margin-right: 8px;
    color: #666;
  }
}

.reply-title {
  color: #409eff;
  font-weight: 500;
}

.reply-content {
  color: #666;
  line-height: 1.6;
}

.reply-time {
  margin-top: 10px;
  text-align: right;
  color: #999;
  font-size: 12px;
}

.feedback-actions {
  margin-top: 15px;
  text-align: right;
}

.pagination {
  margin: 30px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .feedback-container {
    padding: 0 10px;
  }

  .feedback-item {
    margin-bottom: 15px;
  }

  .feedback-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .feedback-time {
    margin-top: 8px;
  }
}
</style>
